import React, { CSSProperties, useState } from 'react';
import { Badge, Statistic } from 'antd';
import { Layout, useAsyncEffect, useRefreshList } from '@cscec/udp-ui';
import { PortalTitle, containerStyle } from '../common';

const valueStyle: CSSProperties = {
  marginLeft: 14,
};

/**
 * 审批汇总
 */
export default function ApproveCount(props: IProps) {
  const { title, style, env } = props;
  const [state, setState] = useState({
    total: 0, todo: 0, done: 0
  });
  const [forceUpdate, setForceUpdate] = useState({});

  useAsyncEffect(async () => {
    const { status, data } = await env.fetcher({
      url: '/portal/pendingTask/count',
    });
    if (status === 0) {
      setState((p) => ({ ...p, ...data }));
    }
  }, [forceUpdate]);

  useRefreshList(() => {
    setForceUpdate({});
  }, 'MyWorkFlowTask');
  return (
    <div style={{ ...containerStyle, ...style }}>
      <PortalTitle>{title}</PortalTitle>
      <Layout direction="row" style={{ marginTop: 24, gap: 24 }}>
        <Layout.Flex><Statistic title="总审批数" value={state.total} /></Layout.Flex>
        <Layout.Flex><Statistic title={<Badge status="default" text="已审批" />} value={state.done} valueStyle={valueStyle} /></Layout.Flex>
        <Layout.Flex><Statistic title={<Badge status="processing" text="待审批" />} value={state.todo} valueStyle={valueStyle} /></Layout.Flex>
        {/* <Layout.Flex><Statistic title={<Badge status="error" text="驳回" />} value={state.rejectNum} valueStyle={valueStyle} /></Layout.Flex> */}
      </Layout>
    </div>
  );
}

export interface IProps {
  title: string;
  style?: CSSProperties;
  [x: string]: any;
}
